<template>
  <div class="">
    <div v-if="configs && configs.length">
      <CommonForm
        v-if="isReadonly === false"
        :formConfig="formConfig"
        ref="formRef"
        :inline="true"
        :labelWidth="labelWidth"
        :cols="cols"
      />

      <div v-else>
        <el-row v-if="detailStyle === 'form'">
          <el-col v-for="item in configs" :key="item.id" :span="24 / cols">
            <el-form-item :label="item.name">
              <span>{{ item.dataValue }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 表格查看样式 -->
        <el-descriptions
          v-if="detailStyle === 'table'"
          :column="cols"
          size="large"
          border
        >
          <el-descriptions-item v-for="item in configs" :key="item.id">
            <template #label>
              <div class="cell-item">{{ item.name }}</div>
            </template>
            {{ item.dataValue || "" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <el-empty
      v-else
      :image-size="70"
      description="暂无数据"
      class="py-[20px]!"
    />
  </div>
</template>

<script setup lang="ts">
import { deepClone } from "@/utils/commonHooks";
import { CustomObject } from "./index";

defineOptions({
  name: "CommonCustomConfig",
  inheritAttrs: false,
});

const props = defineProps({
  // 接口返回值
  configs: {
    type: Array<CustomObject>,
    default: () => [],
  },
  // 列数
  cols: {
    type: Number,
    default: 3,
  },
  // 是否只读
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  // 查看的样式  form原表单样式、table表格样式
  detailStyle: {
    type: String,
    default: "form",
  },
  labelWidth: {
    type: Number,
    default: 120,
  },
});

const { configs, isReadonly, cols, detailStyle, labelWidth } = toRefs(props);

// form表单参数配置
const formConfig = ref(<any>[]);
const formRef = ref();

// 监测自定义configs变化
watch(
  () => configs,
  (newVal) => {
    const list = deepClone(newVal.value);
    formConfig.value = [];
    if (list.length) {
      list.map((item: any) => {
        const obj = {
          type: filterType(item.type),
          inputType: "text",
          label: item.name,
          fieldName: item.id,
          placeholder: filterPlaceholder(item),
          initValue: item.dataValue || "",
          dataType: filterDataType(item),
          valueFormat: filterValueFormat(item),
          rules: [
            {
              required: false,
              message: filterPlaceholder(item),
              trigger: "blur",
            },
          ],
        };
        formConfig.value = [...formConfig.value, obj];
      });
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

// 过滤form类型
function filterType(inputType: string) {
  let type = "";
  type =
    inputType === "1"
      ? "input"
      : inputType === "2" || inputType === "3"
      ? "select"
      : inputType === "4"
      ? "radio"
      : inputType === "5"
      ? "checkbox"
      : inputType === "6" || inputType === "7"
      ? "date"
      : "input";
  return type;
}

// 过滤placeholder
function filterPlaceholder(item: any) {
  if (item.type === "2" || item.type === "3") {
    return `请选择${item.name}`;
  } else {
    return `请输入${item.name}`;
  }
}

// 过滤时间类型
function filterDataType(item: any) {
  return item.type === "6" ? "datetime" : item.type === "7" ? "date" : "";
}

// 过滤时间格式
function filterValueFormat(item: any) {
  return item.type === "6"
    ? "YYYY-MM-DD HH:mm:ss"
    : item.type === "7"
    ? "YYYY-MM-DD"
    : "";
}

// 获取所得自定义值
function handleConfigs() {
  return new Promise((resolve, reject) => {
    formRef.value.validate().then((res: any) => {
      const result = [];
      for (let i = 0; i < configs.value.length; i++) {
        const id = configs.value[i].id;
        const obj = {
          ...configs.value[i],
          dataValue: res[id],
        };
        result.push(obj);
      }
      resolve(result);
    });
  });
}
// 向父元素暴露方法
defineExpose({ formRef, handleConfigs });
</script>

<style scoped lang="scss">
:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 120px;
}
:deep(.el-descriptions__content.el-descriptions__cell.is-bordered-content) {
  min-width: 180px;
}
</style>
